<%--
  Created by IntelliJ IDEA.
  User: LV
  Date: 2016/6/29
  Time: 16:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>选择商品分类</title>
    <script>
        $(function ($) {
            $("#select1").children("option").remove();
            $("#select2").children("option").remove();
            $("#select3").children("option").remove();
            $("#select1").append("<option value='0'>"+"--选择一级分类--"+"</option>");
            $("#select2").append("<option value='0'>"+"--选择二级分类--"+"</option>");
            $("#select3").append("<option value='0'>"+"--选择三级分类--"+"</option>");
            $.getJSON("${ctx}/product/getClassifyList/no", function(json){
                //alert("JSON Data: " +json);
                //alert(json.length);
                for(var i in json){
                    //alert(json[i].areaName);
                    $("#select1").append("<option value='"+json[i].categoryId+"'>"+json[i].categoryName+"</option>");}
            });

            //一级分类发生变化时
            $("#select1").change(function () {
                $("#select2").removeAttr("style");
                $("#select3").removeAttr("style");
                $("#select2").children("option").remove();
                $("#select3").children("option").remove();
                $("#select2").append("<option value='0'>"+"--选择二级分类--"+"</option>");
                $("#select3").append("<option value='0'>"+"--选择三级分类--"+"</option>");
                var selectTmp=$("#select1").val();
                //将选择的分类名追加到<p>
                $("#p1").text("");
                if($("#select1").val()!=0) {
                    $("#p1").append($("#select1 option:selected").text());
                }
                if(selectTmp!=0){
                    $.getJSON("${ctx}/product/getClassifyList/"+selectTmp, function(json){
                        //alert("JSON Data: " +json);
                        //alert(json);
                        if(json!=null&&json.length>0) {
                            for (var i in json) {
                                //alert(json[i].areaName);
                                $("#select2").append("<option value='" + json[i].categoryId + "'>" + json[i].categoryName + "</option>");
                            }
                        }
                    });
                }else {
                    //如果没有二级分类，就隐藏二级和三级分类
                    $("#select2").attr("style","display: none");
                    $("#select3").attr("style","display: none");
                }
            })

            //二级分类发生变化时
            $("#select2").change(function () {
                $("#select3").removeAttr("style");
                $("#select3").children("option").remove();
                $("#select3").append("<option value='0'>"+"--选择三级分类--"+"</option>");
                var selectTmp=$("#select2").val();
                //将选择的分类名追加到<p>
                $("#p1").text("");
                if($("#select2").val()!=0) {
                    $("#p1").append($("#select1 option:selected").text() + "/" + $("#select2 option:selected").text());
                }else{
                    $("#p1").append($("#select1 option:selected").text());
                }

                if(selectTmp!=0){
                    $.getJSON("${ctx}/product/getClassifyList/"+selectTmp, function(json){
                        //alert("JSON Data: " +json);
                        if(json!=null&&json.length>0) {
                            for (var i in json) {
                                //alert(json[i].areaName);
                                $("#select3").append("<option value='" + json[i].categoryId + "'>" + json[i].categoryName + "</option>");
                            }
                        }else{
                            //如果没有三级分类，就隐藏三级分类
                            $("#select3").attr("style","display: none");
                        }
                    });
                }else{
                    //如果没有三级分类，就隐藏三级分类
                    $("#select3").attr("style","display: none");
                }

            })

            //三级分类发生变化时
            $("#select3").change(function () {
                //将选择的分类名追加到<p>
                $("#p1").text("");
                if($("#select3").val()!=0) {
                    $("#p1").append($("#select1 option:selected").text() + "/" + $("#select2 option:selected").text() + "/" + $("#select3 option:selected").text());
                    $("#categoryValue").val()
                }else {
                    $("#p1").append($("#select1 option:selected").text() + "/" + $("#select2 option:selected").text());
                }
            })

        })
    </script>
</head>
<body>
<div>
    你选择的分类是：<p id="p1"></p>
</div>
<form action="${ctx}/product/savingProductClassify" method="post">
        <input id="categoryValue" name="categoryValue" >
        <tr>
           <td><select id="select1" name="category1" size="7"></select></td>
           <td><select id="select2" name="category2" size="7"></select></td>
           <td><select id="select3" name="category3" size="7"></select></td>

        </tr>

     <tr><input type="submit" value="提交"/></tr>


    </table>
</form>

</body>
</html>
